import React, { useState } from 'react'
import { Button, Form, Input, message } from 'antd'
import '@/views/login/Login.css' // 使用 @ 引入 CSS 文件
import SessionStorageUtil from '@/utils/sessionStorageUtil' // 使用 @ 引入工具类
import FetchUtil from '@/utils/fetchUtil' // 使用 @ 引入工具类
import { useNavigate } from 'react-router-dom'
import { ApiResponse } from '../../types/ApiResponse'

const Login: React.FC = () => {
  const [loading, setLoading] = useState(false)
  const navigate = useNavigate()

  const onFinish = (values: { username: string; password: string }) => {
    setLoading(true)
    const { username, password } = values
    const body = {
      username,
      password,
    }
    FetchUtil.post('/api/login', body)
      .then((data: ApiResponse<unknown>) => {
        setLoading(false)
        if (data.success) {
          message.success('登录成功！')
          SessionStorageUtil.setItem('user', { username: values.username })
          navigate('/dashboard') // 登录成功后跳转到 Dashboard
        } else {
          message.error('用户名或密码错误！')
        }
      })
      .catch((error: unknown) => {
        setLoading(false)
        message.error('登录失败，请稍后再试！')
        console.error('Login error:', error)
      })
    // 模拟登录逻辑
    // setTimeout(() => {
    //   setLoading(false)
    //   if (values.username === 'admin' && values.password === '123456') {
    //     message.success('登录成功！')
    //     SessionStorageUtil.setItem('user', { username: values.username })
    //     navigate('/dashboard') // 登录成功后跳转到 Dashboard
    //   } else {
    //     message.error('用户名或密码错误！')
    //   }
    // }, 1000)
  }

  return (
    <div className="login-container">
      <Form
        name="login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={onFinish}
      >
        <h2 className="login-title">登录</h2>
        <Form.Item
          name="username"
          rules={[{ required: true, message: '请输入用户名！' }]}
        >
          <Input placeholder="用户名" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入密码！' }]}
        >
          <Input.Password placeholder="密码" />
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
            loading={loading}
          >
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Login
